<template>
    <div>
        <el-container>
            <el-header>
                <Nav></Nav>
            </el-header>
            <el-container class="middle">
                <el-main>
                    <Header></Header>
                    <el-divider></el-divider>
                    <el-tabs v-model="activeName">
                        <el-tab-pane label="文章" name="first">
                            <div class="block">
                                <el-timeline>
                                    <el-timeline-item :timestamp="article.created" placement="top" :key="article.id" v-for="article in articles">
                                        <el-card v-if="article.titleImg">
                                            <el-row>
                                                <h4 style="text-align: left;margin: 10px 5px;" @click="toDetail(article.id)">{{article.title}}</h4>
                                            </el-row>
                                            <el-row>
                                                <el-col :span="6">
                                                    <div class="block">
                                                        <el-image style="margin: 0 5px;width: 190px;height: 100px;" src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg" @click="toDetail(article.id)"></el-image>
                                                    </div>
                                                </el-col>
                                                <el-col :span="18">
                                                    <div style="margin: 5px 10px;">
                                                        <p style="text-align: left" @click="toDetail(article.id)">{{article.description}}</p>
                                                    </div>
                                                </el-col>
                                            </el-row>
                                            <el-row>
                                                <el-col :span="12">
                                                    <el-tag v-if="article.gps" :key="gp" v-for="gp in article.gps.split(',')" style="margin-right: 20px;">{{gp}}</el-tag>
                                                </el-col>
                                                <el-col v-if="article.gps" :span="8" :offset="4">
                                                    <el-badge :value="article.commentNum" style="margin-right: 40px;">
                                                        <el-button size="small">评论</el-button>
                                                    </el-badge>
                                                    <el-badge :value="article.visitNum" style="margin-right: 40px;" type="primary">
                                                        <el-button size="small">阅读</el-button>
                                                    </el-badge>
                                                </el-col>
                                                <el-col v-if="!article.gps" :span="8" :offset="16">
                                                    <el-badge :value="article.commentNum" style="margin-right: 40px;">
                                                        <el-button size="small">评论</el-button>
                                                    </el-badge>
                                                    <el-badge :value="article.visitNum" style="margin-right: 40px;" type="primary">
                                                        <el-button size="small">阅读</el-button>
                                                    </el-badge>
                                                </el-col>
                                            </el-row>
                                        </el-card>
                                        <el-card v-if="!article.titleImg">
                                            <el-row>
                                                <h4 style="text-align: left;margin: 10px 5px;" @click="toDetail(article.id)">{{article.title}}</h4>
                                            </el-row>
                                            <el-row>
                                                <el-col :span="24">
                                                    <div style="margin: 5px 10px;">
                                                        <p style="text-align: left" @click="toDetail(article.id)">{{article.description}}</p>
                                                    </div>
                                                </el-col>
                                            </el-row>
                                            <el-row>
                                                <el-col :span="12">
                                                    <el-tag v-if="article.gps" :key="gp" v-for="gp in article.gps.split(',')" style="margin-right: 20px;">{{gp}}</el-tag>
                                                </el-col>
                                                <el-col v-if="article.gps" :span="8" :offset="4">
                                                    <el-badge :value="article.commentNum" style="margin-right: 40px;">
                                                        <el-button size="small">评论</el-button>
                                                    </el-badge>
                                                    <el-badge :value="article.visitNum" style="margin-right: 40px;" type="primary">
                                                        <el-button size="small">阅读</el-button>
                                                    </el-badge>
                                                </el-col>
                                                <el-col v-if="!article.gps" :span="8" :offset="16">
                                                    <el-badge :value="article.commentNum" style="margin-right: 40px;">
                                                        <el-button size="small">评论</el-button>
                                                    </el-badge>
                                                    <el-badge :value="article.visitNum" style="margin-right: 40px;" type="primary">
                                                        <el-button size="small">阅读</el-button>
                                                    </el-badge>
                                                </el-col>
                                            </el-row>
                                        </el-card>
                                    </el-timeline-item>
                                </el-timeline>
                                <el-pagination
                                        background
                                        layout="prev, pager, next"
                                        :current-page="currentPage"
                                        :page-size="pageSize"
                                        :total="total"
                                        @current-change=findPage(currentPage)>
                                </el-pagination>
                            </div>
                        </el-tab-pane>
<!--                        <el-tab-pane label="专栏" name="second">-->
<!--                            <el-row>-->
<!--                                <el-col :span="8">-->
<!--                                    <el-card style="padding: 0; margin: 0 20px">-->
<!--                                        <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">-->
<!--                                        <div style="padding: 14px;">-->
<!--                                            <span>股票的心法</span>-->
<!--                                            <div class="bottom clearfix">-->
<!--                                                <time class="time">2020-1-10 9:30</time>-->
<!--                                                <el-button type="text" class="button">查看</el-button>-->
<!--                                            </div>-->
<!--                                        </div>-->
<!--                                    </el-card>-->
<!--                                </el-col>-->
<!--                                <el-col :span="8">-->
<!--                                    <el-card style="padding: 0; margin: 0 20px">-->
<!--                                        <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">-->
<!--                                        <div style="padding: 14px;">-->
<!--                                            <span>交易系统的建立</span>-->
<!--                                            <div class="bottom clearfix">-->
<!--                                                <time class="time">2020-1-10 9:30</time>-->
<!--                                                <el-button type="text" class="button">查看</el-button>-->
<!--                                            </div>-->
<!--                                        </div>-->
<!--                                    </el-card>-->
<!--                                </el-col>-->
<!--                                <el-col :span="8">-->
<!--                                    <el-card style="padding: 0; margin: 0 20px">-->
<!--                                        <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">-->
<!--                                        <div style="padding: 14px;">-->
<!--                                            <span>三易交易系统</span>-->
<!--                                            <div class="bottom clearfix">-->
<!--                                                <time class="time">2020-1-10 9:30</time>-->
<!--                                                <el-button type="text" class="button">查看</el-button>-->
<!--                                            </div>-->
<!--                                        </div>-->
<!--                                    </el-card>-->
<!--                                </el-col>-->
<!--                            </el-row>-->
<!--                            <el-divider></el-divider>-->
<!--                            <el-row>-->
<!--                                <el-col :span="8">-->
<!--                                    <el-card style="padding: 0; margin: 0 20px">-->
<!--                                        <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">-->
<!--                                        <div style="padding: 14px;">-->
<!--                                            <span>股票的心法</span>-->
<!--                                            <div class="bottom clearfix">-->
<!--                                                <time class="time">2020-1-10 9:30</time>-->
<!--                                                <el-button type="text" class="button">查看</el-button>-->
<!--                                            </div>-->
<!--                                        </div>-->
<!--                                    </el-card>-->
<!--                                </el-col>-->
<!--                                <el-col :span="8">-->
<!--                                    <el-card style="padding: 0; margin: 0 20px">-->
<!--                                        <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">-->
<!--                                        <div style="padding: 14px;">-->
<!--                                            <span>交易系统的建立</span>-->
<!--                                            <div class="bottom clearfix">-->
<!--                                                <time class="time">2020-1-10 9:30</time>-->
<!--                                                <el-button type="text" class="button">查看</el-button>-->
<!--                                            </div>-->
<!--                                        </div>-->
<!--                                    </el-card>-->
<!--                                </el-col>-->
<!--                            </el-row>-->
<!--                        </el-tab-pane>-->
                    </el-tabs>
                </el-main>
                <el-aside width="300px">
                    <el-card class="box-card">
                        <el-row>
                            <h4 style="text-align: left;margin: 2px 5px;">点击排行</h4>
                            <el-divider></el-divider>
                            <h5 style="text-align: left; margin: 3px 5px;" v-for="article in readTopList" @click="toDetail(article.id)">
                                {{article.title}}
                            </h5>
                        </el-row>
                    </el-card>
<!--                    <el-card class="box-card">-->
<!--                        <el-row>-->
<!--                            <h4 style="text-align: left;margin: 2px 5px;">讨论圈</h4>-->
<!--                            <el-divider></el-divider>-->
<!--                            <h5 style="text-align: left;margin: 5px 5px;"></h5>-->
<!--                            <h5 style="text-align: left;margin: 5px 5px;">大盘涨个股却要下跌为什么?</h5>-->
<!--                            <h5 style="text-align: left;margin: 5px 5px;">为什么龙头一直涨?</h5>-->
<!--                            <h5 style="text-align: left;margin: 5px 5px;">为什么龙头一直涨?</h5>-->
<!--                            <h5 style="text-align: left;margin: 5px 5px;">为什么龙头一直涨?</h5>-->
<!--                            <h5 style="text-align: left;margin: 5px 5px;">为什么龙头一直涨?</h5>-->
<!--                        </el-row>-->
<!--                    </el-card>-->
<!--                    <el-card class="box-card">-->
<!--                        <span>广告位</span>-->
<!--                    </el-card>-->
                </el-aside>
            </el-container>
            <el-footer>备案号：冀ICP备19020033号</el-footer>
        </el-container>
    </div>
</template>

<script>
    import Nav from "../components/Nav";
    import Header from "../components/Header";
    export default {
        name: "Space",
        components: {Header,Nav},
        data() {
            return {
                total:0,
                currentPage:1,
                pageSize:10,
                articles: {},
                activeName: 'first',
                readTopList:[],
            }
        },
        methods: {
            getReadList(){
                const _this = this
                this.$request({
                    url: '/article/author/top',
                    method: 'post',
                    params:{
                        size: 10,
                        userId:this.$route.query.userId,
                    }
                }).then(res => {
                    if(res.code === 200){
                        _this.readTopList = res.data
                    }
                })
            },
            findPage() {
                const _this = this
                this.$request({
                    url: '/space/article/page',
                    method: 'post',
                    params:{
                        pageNum:this.currentPage-1,
                        size: this.pageSize,
                        userId:this.$route.query.userId,
                    }
                }).then(res => {
                    if(res.code === 200){
                        _this.articles = res.data.articles
                        _this.total = res.data.total
                    }
                })
            },
            toDetail(articleId){
                this.$router.push({
                    path:"/detail",
                    query:{
                        id:articleId,
                    }
                })
            }
        },
        created() {
            this.findPage()
            this.getReadList()
        }
    }
</script>

<style scoped>
    .el-header, .el-footer {
        background-color: white;
        color: #333;
        text-align: center;
        line-height: 60px;
    }

    .el-aside {
        background-color: white;
        color: #333;
        text-align: center;
    }
    .el-main{
        padding: 10px;
    }
    .middle {
        padding: 5px;
        margin: 5px auto;
        width: 1200px;
        min-height: 1200px;
        background-color: white;
        color: #333;
        text-align: center;
    }
    .el-aside .el-card{
        margin: 6px 3px;
        min-height: 200px;
        max-height: 500px;
    }

    .time {
        font-size: 13px;
        color: #999;
    }

    .bottom {
        margin-top: 13px;
        line-height: 12px;
    }

    .button {
        padding: 0;
        float: right;
    }

    .image {
        width: 100%;
        display: block;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }
</style>
